<style lang="less">
</style>

<template>
  <Menu ref="sideMenu" :active-name="$route.name" :open-names="openedSubmenuArr" theme="dark" width="auto"
        @on-select="changeMenu">
    <template v-for="item in menuList" v-if="item.name!=='otherRouter'">
      <MenuItem v-if="item.children.length<=1" :name="item.children[0].name">
        <Icon :type="item.icon" :size="iconSize"></Icon>
        <span class="layout-text">{{ itemTitle(item) }}</span>
      </MenuItem>
      <Submenu v-if="item.children.length>1" :name="item.name">
        <template slot="title">
          <Icon :type="item.icon" :size="iconSize"></Icon>
          <span class="layout-text">{{ itemTitle(item) }}</span>
        </template>
        <template v-for="child in item.children">
          <MenuItem :name="child.name">
            <Icon :type="child.icon" :size="iconSize"></Icon>
            <span class="layout-text">{{ itemTitle(child)}}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
  </Menu>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    data () {
      return {
      }
    },
    name: 'sidebarMenu',
    props: {
      slotTopClass: String,
      menuList: Array,
      iconSize: Number
    },
    computed: {
      ...mapState(['openedSubmenuArr']),
    },
    methods: {
      changeMenu (active) {
        this.$router.push({
          name: active
        })
      },
      itemTitle (item) {
        if (typeof item.meta.title === 'object') {
          return this.$t(item.meta.title.i18n)
        } else {
          return item.meta.title
        }
      },updateSubArr(){
        let target=''
        /*this.menuList.map(item=>{
          item.children.map(child=>{
            if (child.name===this.$route.name){
              target=item.name
            }
          })
        })*/

        let routerName = this.$route.name
        let curPaths = [{title:'首页',path:'/home',name:'home_index'}]
        this.menuList.forEach(item => {
          item.children.forEach(child => {
            if (routerName === child.name) {
              target=item.name

              if (item.name !== 'otherRouter') {
                if (item.children.length === 1) {
                  if (child.name !== 'home_index')
                    curPaths.push({title:child.meta.title,path:item.path+'/'+child.path,name:child.name})
                } else {
                  curPaths.push({title:item.meta.title,path:item.path,name:item.name}, {title:child.meta.title,path:item.path+'/'+child.path,name:child.name})
                }

              } else {
                curPaths.push({title:child.meta.title,path:item.path+'/'+child.path,name:child.name})
              }
            }
          })
        })

        this.$emit('on-update-path',curPaths)

        this.$store.commit('updateOpenedSubmenuArr',[target])
      }
    },
    watch: {
      '$route.name'(){
        this.updateSubArr()
      },
      menuList(){
        this.updateSubArr()
      }
    },
    updated () {
      this.$nextTick(() => {
        if (this.$refs.sideMenu) {
          this.$refs.sideMenu.updateOpened()
          this.$refs.sideMenu.updateActiveName()
        }
      })
    }, created () {
    }, mounted () {
      this.updateSubArr()
    }
  }
</script>
